<template>
  <div id="bottom-line">
            <audio controls id="audioline" @canplay="progress0"  :src="$store.state.url"></audio>
            <div id="playnew">
                <div id="leftbox">
                <span class="el-icon-caret-left"></span>
                <span class="el-icon-video-play" @click="musicplay" id="play"></span>
                <span class="el-icon-video-pause" @click="musicpause" id="pause"></span>
                 <span class="el-icon-caret-right"></span>
                <img id="leftimg" src="../assets/logo.png" alt="">
                </div>
               <div id="middlebox" @mousedown="down" @mouseup="up">
                     <div id="toback"><span>{{$store.state.name}}</span><span> - </span><span>{{$store.state.ar}}</span></div>
                     <el-slider id="long" v-model="valuel" :show-tooltip="false" @change="musicchange"></el-slider>
               </div>
                <span id="timemes">{{curtime}} &nbsp; | &nbsp;{{sumtime}}</span>
            </div>
        </div>
</template>

<script>
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
// import func from 'vue-editor-bridge';
export default {
    name:'vaudio',
    data() {
      return {
        drag:true,
        valuel: 0,
        sumtime:'00:00',
        curtime:'00:00',
        url:'',
      }
    },
    mounted:function(){
        console.log(this.$store.state.url)
    },
    methods: {
      musicplay(){
         let au= document.getElementById("audioline");
         au.play();
          document.getElementById("pause").style.display="block";
          document.getElementById("play").style.display="none"
          this.valuel
      },
          musicpause(){
         let au= document.getElementById("audioline");
         au.pause();
          document.getElementById("pause").style.display="none";
          document.getElementById("play").style.display="block";
      },
    //   /song/url
     progress0(){
        let au=document.getElementById("audioline");
        console.log(au.currentTime)
        let leng=au.duration;
        let min=Math.floor(leng/60);
        let se=Math.round(leng-min*60);
          if(min<10)
        {
            min='0'+min+'';
        }
        if(se<10)
        {
            se='0'+se+'';
        }
        this.sumtime=min+':'+se;
        console.log(this.sumtime);
        let that=this;
        au.addEventListener("timeupdate",function(e){ 
        let leng0=e.target.currentTime;
        let min0=Math.floor(leng0/60);
        let se0=Math.round(leng0-min0*60);
        if(se0<10)
        {
            se0='0'+se0+'';
        }
        if(min0<10)
        {
            min0='0'+min0+'';
        }
        that.curtime=min0+':'+se0;
        let time =that.curtime;
          that.$store.commit('gettime',time);
         that.valuel=Math.floor(e.target.currentTime/au.duration*100);
            },false);
             au.play();
            document.getElementById("pause").style.display="block";
          document.getElementById("play").style.display="none"
    },
    musicchange(){
          if(!this.drag){
            let au=document.getElementById("audioline");  
            let pec=this.valuel/100;
            au.currentTime=au.duration*pec;
            au.play();
            document.getElementById("pause").style.display="block";
          document.getElementById("play").style.display="none"
          }

    },
    down(){
        this.drag=true;
        let au= document.getElementById("audioline");
         au.pause();
          document.getElementById("pause").style.display="none";
          document.getElementById("play").style.display="block";
    },
    up(){
        this.drag=false;
        console.log(this.drag);
    },
    }
   
    

}
</script>

<style scoped>
#bottom-line {
     position: absolute;
     left: 300px;
     top: 665px;
     width: 70%;
     height: 40px;
     z-index: 100000;
     /* background-color: aqua; */
 }
 
 #audioline {
     position: relative;
     left: 0px;
     top: 30px;
     width: 1500px;
     z-index: -10;
     opacity: 0;
 }
 /* 定义新样式 */
 #playnew{
     position: relative;
     top:-35px;
     left: -400px;
     width:1800px;
     height: 60px;
     color: aliceblue;
     background-color:rgb(10, 1, 32);
 }
 #leftimg{
     position: relative;
     top: 5px;
     left: 300px;
     width: 40px;
     height: 40px;
 }
.el-icon-caret-left,.el-icon-caret-right{
     position: relative;
     color: aliceblue;
     left: 250px;
     font-size: 35px;
     margin-left: 60px;
 }
  .el-icon-video-play{
        position: absolute;
      color: aliceblue;
       font-size: 35px;
     left: 360px;
     top:10px;
  }
 .el-icon-video-pause{
     position: absolute;
      color: aliceblue;
       font-size: 35px;
       top:10px;
     left: 360px;
     display: none;
 }
 #leftbox{
     display: inline-block;
 }
 #middlebox{
     position: relative;
     top:-23px;
     left: 360px;
     display: inline-block;
     color: aliceblue;
     font-size: 14px;
 }
 #long{
     width: 600px;
     z-index: 20000;
 }
 #toback{
     z-index: 0;
 }
 .el-slider{
     z-index: 100000;
 }
 #timemes{
     position: relative;
     left: 380px;

 }
</style>
<style>
 #audioline {
     position: relative;
     left: 0px;
     top: 30px;
     width: 1500px;
     z-index: -10;
     opacity: 0;
 }
   .el-slider__bar{
    background-color:#4b050e;
   }
   .el-tooltip{
       background-color: aqua;
   }
</style>